<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web端</title>
    <style>
        *{
            font-size: 50px;
        }
        body{
            background-color: blueviolet;
        }
    </style>
    <script>

        let id = 1;
        const callbackMap = {}
        window.JSSDK = {
            getWebEditTextValue(callbackId){
                const editText = document.querySelector('#editText');
                const value = editText.value;
                NativeBridge.receiveMessage(callbackId,value);
            },
            getNativeEditTextValue(callback){
                const callbackId = id++;
                callbackMap[callbackId] = callback;
                NativeBridge.getNativeEditTextValue(callbackId)
            },
            receiveMessage(callbackId, value){
                if(callbackMap[callbackId]){
                    callbackMap[callbackId](value)
                }
            }
        }

        window.showWebDialog = text => window.alert(text);

        document.addEventListener('DOMContentLoaded', e=>{//等DOM事件加载完成后回调
            const editText = document.querySelector('#editText');
            const showBtn = document.querySelector('#showBtn');
            showBtn.addEventListener('click', e=>{
                const inputValue = editText.value;//拿到输入框的内容
                showNativeDialog(inputValue);
            })

            const showBtn2 = document.querySelector('#showBtn2');
            showBtn2.addEventListener('click', e =>{
                window.JSSDK.getNativeEditTextValue(value => window.alert('Native输入值：'+value));
            })
        })

        //调用native端的dialog
        function showNativeDialog(text){
            // window.alert('jsbridge://showNativeDialog?text='+text);
            window.NativeBridge.showNativeDialog(text);//这里的showNativeDialog是原生端的有@JavascriptInterface的那个方法
        }
    </script>
</head>
<body>
    <div>
        <input id="editText" type="text" placeholder="输入内容"/>
    </div>
    <div>
        <button id="showBtn">显示Native端弹窗</button>
    </div>
    <div>
        <button id="showBtn2">显示Native端输入</button>
    </div>
</body>
</html>